<template>
  <view class="page-container">
    <!-- 待审批列表 -->
    <view v-for="(leave, idx) in pendingList" :key="idx" class="leave-card" @click="gotoDetail(leave.leaveId)">
      <!-- 学生信息 -->
      <view class="student-info">
        <text class="name">{{ leave.studentName }}</text>
        <text class="class-id">{{ leave.studentClass }} | 学号：{{ leave.studentId }}</text>
      </view>
      <!-- 请假信息 -->
      <view class="leave-info">
        <view class="info-item"><text class="label">类型：</text>{{ leave.leaveType }}</view>
        <view class="info-item"><text class="label">时间：</text>{{ leave.startDate }} 至 {{ leave.endDate }}</view>
        <view class="info-item"><text class="label">申请时间：</text>{{ leave.applyTime }}</view>
        <view class="info-item"><text class="label">事由：</text>{{ leave.reason }}</view>
      </view>
      <!-- 待审批标签 -->
      <view class="status-tag pending-tag">待审批</view>
    </view>

    <!-- 空状态 -->
    <view v-if="pendingList.length === 0" class="empty-box">
      <image src="/static/empty.png" mode="widthFix" class="empty-icon"></image>
      <text class="empty-text">暂无待审批的请假申请</text>
    </view>
  </view>
</template>

<script>
import { getPendingList } from '@/common/util.js';

export default {
  data() {
    return {
      pendingList: []
    };
  },
  onLoad() {
    this.loadPending();
  },
  onPullDownRefresh() {
    this.loadPending(() => uni.stopPullDownRefresh());
  },
  methods: {
    loadPending(callback) {
      this.pendingList = getPendingList();
      callback && callback();
    },
    gotoDetail(leaveId) {
      uni.navigateTo({ url: `/pages/teacher/approve-detail?leaveId=${leaveId}` });
    }
  }
};
</script>

<style scoped>
.page-container {
  background: #F5F5F5;
  min-height: 100vh;
  padding: 15rpx;
}
.leave-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 15rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}
.student-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}
.name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}
.class-id {
  font-size: 24rpx;
  color: #666;
}
.leave-info {
  margin-bottom: 20rpx;
}
.info-item {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 12rpx;
}
.label {
  color: #999;
  margin-right: 8rpx;
}
.status-tag {
  font-size: 24rpx;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  width: fit-content;
}
.pending-tag {
  background: #FFF8E6;
  color: #FF9800;
}
.empty-box {
  text-align: center;
  padding-top: 200rpx;
}
.empty-icon {
  width: 200rpx;
  margin-bottom: 30rpx;
}
.empty-text {
  font-size: 28rpx;
  color: #999;
}
</style>